<template>
	<view class="content">
		<view class="location" @tap="open_change_city">
			<text>自动定位:&ensp;{{position_city}}</text>
			<text>切换</text>
		</view>
		<view class="video_list">
			<view class="video_item">
				<video src="http://feed.resrc.svideo.sogoucdn.com/videodown/110002/783/c7834d3dc7618143d9b710d60571d5be.mp4"></video>
				<image src="https://picsum.photos/50/50?random=7"></image>
			</view>
			<view class="video_item">
				<video src="http://feed.resrc.svideo.sogoucdn.com/videodown/110002/783/c7834d3dc7618143d9b710d60571d5be.mp4"></video>
				<image src="https://picsum.photos/50/50?random=7"></image>
			</view>
			<view class="video_item">
				<video src="http://feed.resrc.svideo.sogoucdn.com/videodown/110002/839/e83f9408f9eb4edb776786efbfa6abcf.mp4"></video>
				<image src="https://picsum.photos/50/50?random=7"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Vuex from "vuex";
	export default {
		onLoad() {},
		computed: {
			...Vuex.mapState(["position_city"]),
		},
		data() {
			return {};
		},
		methods: {
			open_change_city() {
				uni.navigateTo({
					url: "/pages/changeCity/changeCity"
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-color: #000;
		padding-top: 120rpx;
	}

	.location {
		height: 80rpx;
		padding: 0rpx 50rpx 0rpx 60rpx;
		overflow: hidden;
		background-color: #000;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		letter-spacing: 4rpx;
		color: #75776F;

		&::after,
		&::before {
			font-family: "iconfont";
			font-size: 26rpx;
			color: #75776F;
			position: absolute;
			top: 50%;
			transform: translateY(-35%);
		}

		&::after {
			left: 20rpx;
			content: "\e614";
		}

		&::before {
			content: "\e60a";
			right: 20rpx;
		}

	}

	// 视频播放列表
	.video_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.video_item {
			margin-top: 20rpx;
			width: calc(50% - 10rpx);
			position: relative;
			border-radius: 6rpx;
			overflow: hidden;

			video {
				width: 100%;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				border: 1rpx solid #FFFFFF;
				position: absolute;
				right: 15rpx;
				bottom: 15rpx;
			}
		}
	}
</style>
